<template>
  <div class="all">
    <!-- 展开菜单 -->
    <div v-if="!isChange" ref="full_menu" class="full_menu">
      <div class="menu_detail">
        <div v-for="(item,index) in totalMenu" :key="index">
          <a :class="{'active':menuIndex===index}" class="menu_item" @click="chooseMenu(index)">
            <div>
              <i :class="item.code" :style="menuIndex===index?'color:#427EF1':''" class="choose_icon"></i>
            </div>
            <span class="item_name">
                {{ item.name }}
                <i v-if="item.childPermissions&&Object.keys(item.childPermissions).length!==0&&item.level!==2"
                   :class="menuIndex===index?'el-icon-caret-bottom':'el-icon-caret-right'"></i>
              </span>
          </a>
          <div v-if="menuIndex===index&&item.level!==2" id="second" class="second_box">
            <div v-for="(sitem,sindex) in item.childPermissions" :key="sindex" class="second_line">
              <a :class="{'second_choose':secondIndex===sindex}"
                 @click="chooseSecond(index,sindex,sitem.url,sitem.id)">{{ sitem.name }}</a>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>

import {getFirst, getSecond, setFirst, setSecond} from "@/utils/menuIndex";
import {getTree} from "../../utils/menuAuth";

export default {
  props: ['total', 'isMenu'],
  data() {
    return {
      menuIndex: getFirst(),
      secondIndex: getSecond(),
      totalMenu: [],
      userId: '',
      isChange: false
    }
  },
  mounted() {
    // 获取左侧菜单
    if (getTree()) {
      let m = JSON.parse(getTree());
      if (m.length !== 0) {
        this.totalMenu = m;
      }
    } else {
      this.$router.push('/')
    }
    //获取当前菜单索引
    let one = getFirst();
    let two = getSecond();
    this.menuIndex = one ? parseInt(one) : this.menuIndex;
    this.secondIndex = two ? parseInt(two) : this.secondIndex;
  },
  methods: {
    // 一级菜单选择
    chooseMenu(e) {
      let that = this;
      let param = !that.totalMenu[e].childPermissions || that.totalMenu[e].childPermissions.length === 0 || that.totalMenu[e].childPermissions[0].level === 3;
      let url = param ? that.totalMenu[e].url : that.totalMenu[e].childPermissions[0].url;
      let id = param ? that.totalMenu[e].id : that.totalMenu[e].childPermissions[0].id;
      that.changeSwitch(false);
      if (url) {
        if (that.menuIndex === e) {
          that.menuIndex = '';
        } else {
          that.setIndex(e, 0);
          // 没有子类时，直接跳转，有子类时，跳到第一个
          if (this.$route.path !== url) {
            that.$router.push({
              path: (url && url.substring(0, 1) === '/' ? url : '/' + url),
              query: {
                key: id,
              }
            })
          }
        }
      } else {
        that.$notify({
          title: '提示',
          message: '该菜单下暂无子菜单！',
          position: 'bottom-left',
          showClose: false,
          duration: 1500,
          type: 'warning'
        });
      }
    },

    // 二级菜单选择
    chooseSecond(findex, sindex, url, id) {
      this.setIndex(findex, sindex);
      if (this.$route.fullPath !== (url + '?key=' + id)) {
        this.$router.push({
          path: url,
          query: {
            key: id
          }
        });
      }
    },

    // 设置菜单索引值
    setIndex(first, second) {
      this.menuIndex = first;
      this.secondIndex = second;
      setFirst(first);
      setSecond(second);
    },

    changeSwitch(is) {
      this.isChange = is;
      this.$emit('listenToMenu', is);
    }
  },
  watch: {
    // 监听路由，修改菜单索引
    '$route': function (newR, oldR) {
      this.menuIndex = parseFloat(getFirst());
      this.secondIndex = parseFloat(getSecond());
    },
    isMenu(n, o) {
      this.isChange = n
      this.$emit('listenToMenu', n);
    }
  }
}
</script>


<style scoped>
.menu_box {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 214px;
  z-index: 1;
  padding-top: 60px;
  background-color: #000;
}

.con_head {
  width: 100%;
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  height: 59px;
  background-color: #265abf;
}

.to_close {
  left: -154px;
}

.con_head .btn_icon {
  width: 60px;
  height: 59px;
  background: #427EF1;
  position: relative;
}

.con_head .menu_icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 25px;
  cursor: pointer;
}

.center_logo {
  width: 100%;
  height: 59px;
  text-align: center;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.center_logo span {
  display: block;
  line-height: 59px;
  font-size: 18px;
  font-weight: 600;
}

.center_logo img {
  width: 35px;
  height: 35px;
  margin-right: 10px;
}

.full_menu {
  padding: 40px 0;
}

.short_head {
  left: 154px;
}

.to_close {
  left: -154px;
}

.all {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.switch_btn {
  position: absolute;
  right: 0;
  top: 50%;
  padding: 10px 0;
  background: #f2f2f2;
  cursor: pointer;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}

.menu_detail {
  color: #fff;
}

.has_tip {
  display: none !important;
}

.menu_item {
  height: 50px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  box-sizing: border-box;
  padding-left: 20px;
}

.menu_item i {
  font-size: 16px;
  margin-left: 8px;
  color: #fff;
}

.menu_item div {
  display: flex;
  align-items: center;
  width: 30px;
  height: 30px;
  justify-content: center;
}

.menu_item div img {
  width: 20px;
  height: 20px;
}

.item_name {
  margin-left: 5px;
  letter-spacing: 1px;
}

.menu_item:hover {
  color: #427EF1;
  background: rgba(209, 240, 255, 0.3);;
}

.menu_item:hover i {
  color: #427EF1;
}

.active {
  color: #427EF1;
  background: rgba(209, 240, 255, 0.3);
}

.active i {
  color: #427EF1;
}

.second_box {
  color: #fff;
  padding-left: 55px;
  text-align: left;
  font-size: 14px;
  background: #030619;
}

.second_box a {
  display: block;
  line-height: 40px;
  height: 40px;
  cursor: pointer;
  color: #c1c1c1;
}

.second_box a:hover {
  color: #427EF1;
}

.second_box .second_choose {
  color: #427EF1;
}

.second_line div a {
  display: block;
  line-height: 40px;
  height: 40px;
  padding-left: 20px;
  color: #999999;
  cursor: pointer;
}

.second_line i {
  margin-right: 6px;
  font-size: 16px;
}

.short_menu {
  position: absolute;
  right: 0;
  top: 0;
  width: 60px;
}

.short_menu a {
  position: relative;
  display: block;
  height: 60px;
  line-height: 70px;
  width: 100%;
  cursor: pointer;
  text-align: center;
}

.short_menu a:hover {
  color: #427EF1;
}

.short_menu i {
  font-size: 28px;
}

</style>
